<!--
 * @Author: XY
 * @Date: 2023-11-09 13:27:45
 * @LastEditors: XY
 * @LastEditTime: 2023-12-13 12:36:03
 * @FilePath: \friendsApp\see_you\src\views\homePage\piazza.vue
 -->
<template>
  <div class="box">
    <div class="head" id="head">
      <div class="head-box">
        <div>广场</div>
        <div class="head-box-camer" @click="goPage('/dynamic')">
          <van-icon name="photograph" color="#fff" />发布
        </div>
      </div>
      <div class="tabs">
        <div :class="active == '0' ? 'tabs-active' : 'tabs-items'" @click="tabChange(0)">
          最新
        </div>
        <div :class="active == '1' ? 'tabs-active' : 'tabs-items'" @click="tabChange(1)">
          本地
        </div>
      </div>
    </div>
    <!-- 列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <template #pulling="props">
        <img class="doge" src="https://img01.yzcdn.cn/vant/doge.png"
          :style="{ transform: `scale(${props.distance / 80})` }" />
      </template>

      <!-- 释放提示 -->
      <template #loosing> 最后刷新：{{ nowTime }} </template>

      <!-- 加载提示 -->
      <template #loading> 正在刷新数据中。。。 </template>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData"
        :style="{ height: windowHeight - stickyHeight - tabbarHeight + 'px' }">
        <div class="list">
          <div class="list-info" v-for="(item, index) in dataList" :key="index" @click="
            goPage(
              item.user.is_merchant == 1 ? '/detail' : '/userDetail',
              item.uid
            )
            ">
            <div class="list-info-headImg">
              <img :src="item.user?.avatar" alt="" />
            </div>
            <div class="list-info-message">
              <div class="list-info-message-line1">
                <div class="list-info-message-line1-name">
                  {{ item.user?.nickname }}
                </div>
                <div class="list-info-message-line1-age" v-if="item.user?.sex == 2">
                  <img src="@/assets/iconIndex/girl.png" />{{ item.user?.age }}
                </div>
                <div class="list-info-message-line1-age" v-if="item.user?.sex == 1"
                  style="background: #cde1fd; color: #3662ec">
                  <img src="@/assets/iconIndex/boy.png" />{{ item.user?.age }}
                </div>
                <div class="list-info-message-line1-vip" v-if="item.user?.is_svip == 1">
                  <img src="@/assets/iconIndex/vip.png" alt="" />
                </div>
                <p class="list-info-message-line1-status">
                  <van-icon name="ellipsis" @click.stop="
                    goPageInform('/settingPage/inform', item.user.uid)
                    " />
                </p>
              </div>
              <div class="list-info-message-timer">
                <div class="list-info-message-timer-content">
                  {{ item.add_time }} | {{ item.city_name }}
                </div>
              </div>
              <div class="list-info-message-line2">
                <div class="list-info-message-line2-content">
                  {{ item.content }}
                </div>
              </div>
              <div class="list-info-message-line3">
                <img v-for="itemImg in item.images" :key="itemImg" :src="itemImg"
                  @click.stop="onPreviewPicture(item.images)" />
              </div>
            </div>


          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { sy_convertCityNameToCityCode } from '@/utils/location_convert'
import { getPiazza } from '@/api/index'
import { Toast } from 'vant'
import { location } from '@/utils/getLocation'
import middleUtils from '@/utils/middleUtil'
import { parseTime, formatTime } from '@/utils/fun'
import { ImagePreview } from 'vant'
export default {
  name: 'HomeView',
  data() {
    return {
      nowTime: '',
      cityText: [], //当前城市
      reLnglat: null,
      searchParameter: {
        city_code: '',
        type: 'new',
        page: 1,
        limit: 10,
      },
      loading: false,
      finished: false,
      refreshing: false,
      dataList: [],
      stickyHeight: 0,
      windowHeight: 0,
      tabbarHeight: 0,
      active: 0,
    }
  },
  mounted() {
    console.log(this.$store.state.userInfo.uid)
    this.stickyHeight = document.getElementById('head').clientHeight
    this.windowHeight = document.documentElement.clientHeight
    this.tabbarHeight = document.getElementById('tabbar').clientHeight
    this.$store.dispatch('getCityInfo', '')
    console.log(this.$store.getters['cityInfo'])
    this.searchParameter.city_code = this.$store.getters['cityInfo'].city_code

  },
  methods: {
    goPageInform(e, val) {
      this.$router.push({
        path: e,
        query: {
          id: val,
        },
      })
    },
    tabChange(value) {
      this.active = value
      this.finished = false
      this.loading = true
      if (value == 0) {
        this.searchParameter.type = 'new'
      } else {
        this.searchParameter.type = 'local'
      }
      this.onRefresh()
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.searchParameter.page = 1
      this.dataList = []
      this.getData()
    },

    goPage(path, id) {
      this.$router.push({
        path: path,
        query: {
          id: id,
        },
      })
    },
    // 获取数据
    getData() {
      if (this.searchParameter.page == 1) {
        this.dataList = []
      }
      const queryString = Object.keys(this.searchParameter)
        .map((key) => {
          console.log(typeof this.searchParameter[key])
          if (this.searchParameter[key] && !!this.searchParameter[key]) {
            return `${encodeURIComponent(key)}=${encodeURIComponent(
              this.searchParameter[key]
            )}`
          }
        })
        .filter((res) => {
          return res
        })
        .join('&')
      console.log(queryString, '接口传递的参数')
      getPiazza(queryString).then((res) => {
        console.log(res, '获取区域树')
        this.nowTime = parseTime(new Date())

        if (res.data.count == 0 || res.data.count > this.dataList.length) {
          res.data.list.forEach((el) => {
            el.add_time = formatTime(el.add_time)
          })
          this.searchParameter.page++
          this.dataList = this.dataList.concat(...res.data.list)
        }
        if (res.data.count <= this.dataList.length) {
          this.finished = true
        }
        this.$forceUpdate()
        this.refreshing = false
        this.loading = false
      })
    },

    //获取定位
    getCode() {
      let self = this
      middleUtils.$on('getCity', (city) => {
        console.log(city)
        self.cityText = [city.name, city.city_code]
        self.searchParameter.cityCode = this.cityText[1]
        self.searchParameter.cityName = this.cityText[0]

        this.$nextTick(() => {
          self.getData()
        })
      })

      this.$router.push({ path: '/location' })
    },
    onPreviewPicture(albums) {
      ImagePreview({
        images: [...albums],
      })
    },
  },
}
</script>

<style  lang="scss" scoped>
::v-deep .van-list {
  overflow-y: auto !important;
}

.box {
  // padding: 16px;
  height: 100vh !important;
  overflow-y: hidden !important;
  box-sizing: border-box;
}

.content-class {
  overflow-y: auto;
}

.head {
  background: linear-gradient(180deg, #cde1fd 0%, rgba(255, 255, 255, 0) 100%);
  padding: 26px 16px 16px 16px;

  font-size: 14px;
  font-weight: 400;
  color: #1a1a1a;

  &-box {
    margin: 0 auto;
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
    position: relative;
    text-align: center;

    &-camer {
      float: right;
      width: 66px;
      height: 30px;
      background: linear-gradient(180deg, #3764ec 0%, #6b85f7 100%);
      border-radius: 8px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: 10px;
      top: 0;

      >i {
        margin-right: 2px;
      }
    }
  }

  .tabs {
    margin: 20px auto;
    width: 298px;
    height: 36px;

    background: #edf1fe;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid #edf1fe;

    >div {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    &-active {
      height: 100%;
      font-weight: 500;
      color: #1a1a1a;
      background: #ffffff;
      border-radius: 8px;
      text-align: center;
      transition: all 0.3s;
    }

    &-items {
      font-weight: 500;
      color: #767676;
    }
  }
}

.list {
  // margin-top: 20px;
  padding: 20px 16px 0px 16px;

  &-info {
    display: flex;
    margin-bottom: 20px;
    width: 100%;

    &-headImg {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 7px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    &-message {
      flex: 1;

      >div {
        display: flex;
        align-items: center;
      }

      &-line1 {
        position: relative;

        >div {
          margin-right: 8px;
        }

        &-name {
          font-size: 16px;
          font-weight: 500;
          color: #1a1a1a;
        }

        &-age {
          width: 38px;
          height: 16px;
          background: #fcdbdb;
          border-radius: 8px;
          color: #fa5151;
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            margin-right: 2px;
          }
        }

        &-vip {
          display: flex;
          align-items: center;
        }

        &-status {
          position: absolute;
          right: 0;
          font-size: 16px;
          font-weight: 400;
        }
      }

      &-line2 {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #767676;
        line-height: 12px;
        padding: 8px 0;

        &-content {
          font-size: 16px;
          font-weight: 400;
          color: #1a1a1a;
          line-height: 16px;
        }
      }

      &-timer {
        margin: 8px 0;
        font-size: 10px;
        font-weight: 400;
        color: #767676;
        line-height: 10px;
      }

      &-line3 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;

        img {
          width: 80px;
          height: 80px;
          object-fit: cover;
          margin-bottom: 10px;
          border-radius: 8px;
        }
      }
    }
  }
}

::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}
</style>
